<template>
  <div class="bannerTopVue f-j-a-c click" :class="{'banner-top-hidden':hiddenBannerTop}" @click="go">
    <img src="@/assets/image/tu-huodong@2x.png" alt="" />
    <svg-icon
      name="icon-sy-guanbi"
      class="svg"
      @click="closeBannerTop"
    ></svg-icon>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      hiddenBannerTop: false, //关闭banner
    });

    let closeBannerTop = ()=>{
      data.hiddenBannerTop = true;
    };

    onMounted(() => {
      store.commit("setquxiaobanner", true);
    });
    let go = () =>{
      router.push('Events')
    }
    onUnmounted(() => {});

    return {
      go,
      closeBannerTop,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.bannerTopVue {
  width: 100%;
  height: 60px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;

  > img {
    transition: 0.5s;
    width: 100%;
    height: 100%;
    transform-origin: top;
    &:hover {
      transform: scale(1.1);
    }
  }
  .svg {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
  }
}

// // 关闭顶部banner
.banner-top-hidden {
  height: 0px !important;
}
</style>
